<template>
  <view class="sk-container">
    <scroll-view
      enable-back-to-top="true"
      enhanced="true"
      refresher-enabled="true"
      scroll-y="true"
      class="viewport"
      refresher-background="#f7f7f8"
    >
      <view is="components/carousel/index" style="height: 140px">
        <view class="carousel carousel-index--carousel">
          <swiper
            autoplay="false"
            circular="true"
            interval="3000"
            current="0"
          ></swiper>
          <view class="indicator carousel-index--indicator">
            <text class="dot carousel-index--dot"></text>
            <text
              class="dot carousel-index--dot active carousel-index--active"
            ></text>
            <text class="dot carousel-index--dot"></text>
            <text class="dot carousel-index--dot"></text>
            <text class="dot carousel-index--dot"></text>
          </view>
        </view>
      </view>
      <view is="pages/index/components/entries/index">
        <view class="entries index--entries">
          <scroll-view
            enhanced="true"
            scroll-x="true"
            class="scroll-view index--scroll-view"
          >
            <view class="navs index--navs" style="scroll-snap-align: none">
              <view class="navs-item index--navs-item">
                <navigator
                  class="navigator index--navigator"
                  hover-class="none"
                >
                  <image class="icon index--icon sk-image"></image>
                  <text
                    class="text index--text sk-transparent sk-text-18-7500-469 sk-text"
                    style="background-position-x: 50%"
                  >
                    居家
                  </text>
                </navigator>
                <navigator
                  class="navigator index--navigator"
                  hover-class="none"
                >
                  <image class="icon index--icon sk-image"></image>
                  <text
                    class="text index--text sk-transparent sk-text-18-7500-76 sk-text"
                    style="background-position-x: 50%"
                  >
                    美食
                  </text>
                </navigator>
                <navigator
                  class="navigator index--navigator"
                  hover-class="none"
                >
                  <image class="icon index--icon sk-image"></image>
                  <text
                    class="text index--text sk-transparent sk-text-18-7500-865 sk-text"
                    style="background-position-x: 50%"
                  >
                    服饰
                  </text>
                </navigator>
                <navigator
                  class="navigator index--navigator"
                  hover-class="none"
                >
                  <image class="icon index--icon sk-image"></image>
                  <text
                    class="text index--text sk-transparent sk-text-18-7500-822 sk-text"
                    style="background-position-x: 50%"
                  >
                    母婴
                  </text>
                </navigator>
                <navigator
                  class="navigator index--navigator"
                  hover-class="none"
                >
                  <image class="icon index--icon sk-image"></image>
                  <text
                    class="text index--text sk-transparent sk-text-18-7500-383 sk-text"
                    style="background-position-x: 50%"
                  >
                    个护
                  </text>
                </navigator>
                <navigator
                  class="navigator index--navigator"
                  hover-class="none"
                >
                  <image class="icon index--icon sk-image"></image>
                  <text
                    class="text index--text sk-transparent sk-text-18-7500-837 sk-text"
                    style="background-position-x: 50%"
                  >
                    严选
                  </text>
                </navigator>
                <navigator
                  class="navigator index--navigator"
                  hover-class="none"
                >
                  <image class="icon index--icon sk-image"></image>
                  <text
                    class="text index--text sk-transparent sk-text-18-7500-539 sk-text"
                    style="background-position-x: 50%"
                  >
                    数码
                  </text>
                </navigator>
                <navigator
                  class="navigator index--navigator"
                  hover-class="none"
                >
                  <image class="icon index--icon sk-image"></image>
                  <text
                    class="text index--text sk-transparent sk-text-18-7500-241 sk-text"
                    style="background-position-x: 50%"
                  >
                    运动
                  </text>
                </navigator>
                <navigator
                  class="navigator index--navigator"
                  hover-class="none"
                >
                  <image class="icon index--icon sk-image"></image>
                  <text
                    class="text index--text sk-transparent sk-text-18-7500-51 sk-text"
                    style="background-position-x: 50%"
                  >
                    杂项
                  </text>
                </navigator>
                <navigator
                  class="navigator index--navigator"
                  hover-class="none"
                >
                  <image class="icon index--icon sk-image"></image>
                  <text
                    class="text index--text sk-transparent sk-text-18-7500-884 sk-text"
                    style="background-position-x: 50%"
                  >
                    品牌
                  </text>
                </navigator>
              </view>
            </view>
          </scroll-view>
          <view class="scroll-bar index--scroll-bar">
            <view class="cursor index--cursor" style="left: 0%"></view>
          </view>
        </view>
      </view>
      <view class="panel recommend" style="scroll-snap-align: none">
        <view class="item">
          <view class="title sk-transparent">
            特惠推荐
            <text class="sk-transparent sk-text-18-7500-939 sk-text">
              精选全攻略
            </text>
          </view>
          <navigator class="cards" hover-class="none">
            <image mode="aspectFit" class="sk-image"></image>
            <image mode="aspectFit" class="sk-image"></image>
          </navigator>
        </view>
        <view class="item">
          <view class="title sk-transparent">
            爆款推荐
            <text class="sk-transparent sk-text-18-7500-673 sk-text">
              最受欢迎
            </text>
          </view>
          <navigator class="cards" hover-class="none">
            <image mode="aspectFit" class="sk-image"></image>
            <image mode="aspectFit" class="sk-image"></image>
          </navigator>
        </view>
        <view class="item">
          <view class="title sk-transparent">
            一站买全
            <text class="sk-transparent sk-text-18-7500-132 sk-text">
              精心优选
            </text>
          </view>
          <navigator class="cards" hover-class="none">
            <image mode="aspectFit" class="sk-image"></image>
            <image mode="aspectFit" class="sk-image"></image>
          </navigator>
        </view>
        <view class="item">
          <view class="title sk-transparent">
            领劵中心
            <text class="sk-transparent sk-text-18-7500-130 sk-text">
              超值优惠券
            </text>
          </view>
          <navigator class="cards" hover-class="none">
            <image mode="aspectFit" class="sk-image"></image>
            <image mode="aspectFit" class="sk-image"></image>
          </navigator>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
.sk-transparent {
  color: transparent !important;
}
.sk-text-3-5714-233 {
  background-image: linear-gradient(
    transparent 3.5714%,
    #eeeeee 0%,
    #eeeeee 96.4286%,
    transparent 0%
  ) !important;
  background-size: 100% 28rpx;
  position: relative !important;
}
.sk-text {
  background-origin: content-box !important;
  background-clip: content-box !important;
  background-color: transparent !important;
  color: transparent !important;
  background-repeat: repeat-y !important;
}
.sk-text-18-7500-90 {
  background-image: linear-gradient(
    transparent 18.75%,
    #eeeeee 0%,
    #eeeeee 81.25%,
    transparent 0%
  ) !important;
  background-size: 100% 44.8rpx;
  position: relative !important;
}
.sk-text-18-7500-469 {
  background-image: linear-gradient(
    transparent 18.75%,
    #eeeeee 0%,
    #eeeeee 81.25%,
    transparent 0%
  ) !important;
  background-size: 100% 41.6rpx;
  position: relative !important;
}
.sk-text-18-7500-76 {
  background-image: linear-gradient(
    transparent 18.75%,
    #eeeeee 0%,
    #eeeeee 81.25%,
    transparent 0%
  ) !important;
  background-size: 100% 41.6rpx;
  position: relative !important;
}
.sk-text-18-7500-865 {
  background-image: linear-gradient(
    transparent 18.75%,
    #eeeeee 0%,
    #eeeeee 81.25%,
    transparent 0%
  ) !important;
  background-size: 100% 41.6rpx;
  position: relative !important;
}
.sk-text-18-7500-822 {
  background-image: linear-gradient(
    transparent 18.75%,
    #eeeeee 0%,
    #eeeeee 81.25%,
    transparent 0%
  ) !important;
  background-size: 100% 41.6rpx;
  position: relative !important;
}
.sk-text-18-7500-383 {
  background-image: linear-gradient(
    transparent 18.75%,
    #eeeeee 0%,
    #eeeeee 81.25%,
    transparent 0%
  ) !important;
  background-size: 100% 41.6rpx;
  position: relative !important;
}
.sk-text-18-7500-837 {
  background-image: linear-gradient(
    transparent 18.75%,
    #eeeeee 0%,
    #eeeeee 81.25%,
    transparent 0%
  ) !important;
  background-size: 100% 41.6rpx;
  position: relative !important;
}
.sk-text-18-7500-539 {
  background-image: linear-gradient(
    transparent 18.75%,
    #eeeeee 0%,
    #eeeeee 81.25%,
    transparent 0%
  ) !important;
  background-size: 100% 41.6rpx;
  position: relative !important;
}
.sk-text-18-7500-241 {
  background-image: linear-gradient(
    transparent 18.75%,
    #eeeeee 0%,
    #eeeeee 81.25%,
    transparent 0%
  ) !important;
  background-size: 100% 41.6rpx;
  position: relative !important;
}
.sk-text-18-7500-51 {
  background-image: linear-gradient(
    transparent 18.75%,
    #eeeeee 0%,
    #eeeeee 81.25%,
    transparent 0%
  ) !important;
  background-size: 100% 41.6rpx;
  position: relative !important;
}
.sk-text-18-7500-884 {
  background-image: linear-gradient(
    transparent 18.75%,
    #eeeeee 0%,
    #eeeeee 81.25%,
    transparent 0%
  ) !important;
  background-size: 100% 41.6rpx;
  position: relative !important;
}
.sk-text-18-7500-939 {
  background-image: linear-gradient(
    transparent 18.75%,
    #eeeeee 0%,
    #eeeeee 81.25%,
    transparent 0%
  ) !important;
  background-size: 100% 38.4rpx;
  position: relative !important;
}
.sk-text-18-7500-673 {
  background-image: linear-gradient(
    transparent 18.75%,
    #eeeeee 0%,
    #eeeeee 81.25%,
    transparent 0%
  ) !important;
  background-size: 100% 38.4rpx;
  position: relative !important;
}
.sk-text-18-7500-132 {
  background-image: linear-gradient(
    transparent 18.75%,
    #eeeeee 0%,
    #eeeeee 81.25%,
    transparent 0%
  ) !important;
  background-size: 100% 38.4rpx;
  position: relative !important;
}
.sk-text-18-7500-130 {
  background-image: linear-gradient(
    transparent 18.75%,
    #eeeeee 0%,
    #eeeeee 81.25%,
    transparent 0%
  ) !important;
  background-size: 100% 38.4rpx;
  position: relative !important;
}
.sk-image {
  background: #efefef !important;
}
.sk-pseudo::before,
.sk-pseudo::after {
  background: #efefef !important;
  background-image: none !important;
  color: transparent !important;
  border-color: transparent !important;
}
.sk-pseudo-rect::before,
.sk-pseudo-rect::after {
  border-radius: 0 !important;
}
.sk-pseudo-circle::before,
.sk-pseudo-circle::after {
  border-radius: 50% !important;
}
.sk-container {
  /* position: absolute; */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: transparent;
}

.sk-text {
  &::after {
    content: '';
    position: absolute;
    animation: shan 1.5s ease 0s infinite;
    top: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(
      to left,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, 0.3) 50%,
      rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-45deg);
  }
}
@keyframes shan {
  0% {
    left: -100%;
  }
  100% {
    left: 120%;
  }
}
</style>
